<template>
  <nav>
    <section
      v-for="item in navList"
      :key="item.value"
      :class="curIndex === item.value && 'active'"
      @click="curIndex = item.value"
    >
      {{ item.label }}
    </section>
  </nav>
  <div class="h-[calc(100vh-11.125rem)]">
    <Camera v-if="curIndex === 'camera'" />
    <Uav v-if="curIndex === 'uav'" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

import Camera from './camera/index.vue'
import Uav from './uav/index.vue'

const curIndex = ref('camera')
const navList = [
  {
    label: '摄像机巡视点',
    value: 'camera'
  },
  {
    label: '无人机巡视点',
    value: 'uav'
  }
]
</script>

<style lang="less" scoped>
nav {
  display: flex;
  height: 3.25rem;
  font-size: 0.875rem;
  line-height: 3.25rem;
  border-bottom: 0.063rem solid #e5e6eb;
  user-select: none;

  section {
    margin-left: 1.5rem;
    cursor: pointer;
    font-weight: 500;
  }

  .active {
    position: relative;
    color: #00796a;

    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      content: '';
      border-bottom: 0.125rem solid #00796a;
    }
  }
}
</style>
